<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.基本列表</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>人员列表</h2>
			<ul>
				<!-- <li v-for="(p,index) in persons" :key="p.id"> -->
				<li v-for="(p,index) in persons" :key="index">
					姓名：{{p.name}} --- 年龄：{{p.age}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			new Vue({
				el:'#demo',
				data:{
					a:678,
					persons:[
						{id:'u89usad2ewe',name:'开法拉利的老刘',age:18},
						{id:'u89usa234ws',name:'有趣的男人翔哥',age:20},
						{id:'u89usa0dfk3',name:'圆圆的海峰老师',age:13},
						{id:'u89usadsdif',name:'好看的琪琪老师',age:17},
					]
				}
			})
		</script>
	</body>
</html>